<template>
  <div class="single-month-analysis">
      <div class="title-wrap">
        <h4 class="title"> xxx水质自动监测站  20xx年xx月质控报告</h4>
        <p class="subtitle">运维单位：xxx   运维人员：xxx</p>
      </div>
      <div class="single-modular-wrap">
        <el-scrollbar style="height: 100%">
          <div class="modular-item">
            <h5 class="modular-title">基本情况</h5>
            <div class="modular-body">
              <div class="normal-table-wrap">
                <table>
                  <tr>
                    <td width="20%">水质自动监测站名称</td>
                    <td colspan="2"></td>
                    <td colspan="3">运维单位</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td rowspan="10">水质自动监测站仪器配置</td>
                    <td rowspan="2" width="60px;">序号</td>
                    <td colspan="4">水质自动监测仪器</td>
                    <td rowspan="2">分析方法</td>
                  </tr>
                  <tr>
                    <td>监测项目</td>
                    <td>型号</td>
                    <td>生产商</td>
                    <td>量程</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>常规五参数</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>...</td>
                    <td>......</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td rowspan="8">水质自动监测站质控措施</td>
                    <td>序号</td>
                    <td colspan="4">已实施的质控项目</td>
                    <td>备注</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td colspan="4">24小时零点漂移核查和24小时跨度漂移核查</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td colspan="4">标样核查</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td colspan="4">多点线性核查</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td colspan="4">实际水样对比</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td colspan="4">加标回收率自动测定</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td colspan="4">集成干预检查</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>...</td>
                    <td colspan="4">......</td>
                    <td>-</td>
                  </tr>
                  <tr>
                    <td>其他</td>
                    <td colspan="6"> - </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">数据有效率情况</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column
                  prop="testingItems"
                  label="检测项目">
                </el-table-column>
                <el-table-column
                  prop="monitoringData"
                  label="应获取监测数据数量">
                </el-table-column>
                <el-table-column
                  prop="effectiveData"
                  label="获取有效数据数量">
                </el-table-column>
                <el-table-column
                  prop="dataEfficiency"
                  label="数据有效率">
                </el-table-column>
                <el-table-column
                  prop="qualified"
                  label="是否合格">
                </el-table-column>
                <el-table-column
                  prop="remarks"
                  label="备注">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">质控核查情况</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column label="检测项目">
                  <el-table-column
                    prop="data"
                    label="时间"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="氨氮">
                  <el-table-column
                    prop="zeroAuditAD"
                    label="零点审核"
                  ></el-table-column>
                  <el-table-column
                    prop="zeroDriftAD"
                    label="24小时零点漂移"
                  ></el-table-column>
                  <el-table-column
                    prop="spanVerificationAD"
                    label="跨度核查"
                  ></el-table-column>
                  <el-table-column
                    prop="spanDriftAD"
                    label="24小时跨度漂移"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="高锰酸盐指数">
                  <el-table-column
                    prop="zeroAuditGMSY"
                    label="零点审核"
                  ></el-table-column>
                  <el-table-column
                    prop="zeroDriftGMSY"
                    label="24小时零点漂移"
                  ></el-table-column>
                  <el-table-column
                    prop="spanVerificationGMSY"
                    label="跨度核查"
                  ></el-table-column>
                  <el-table-column
                    prop="spanDriftGMSY"
                    label="24小时跨度漂移"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="总磷">
                  <el-table-column
                    prop="zeroAuditZL"
                    label="零点审核"
                  ></el-table-column>
                  <el-table-column
                    prop="zeroDriftZL"
                    label="24小时零点漂移"
                  ></el-table-column>
                  <el-table-column
                    prop="spanVerificationZL"
                    label="跨度核查"
                  ></el-table-column>
                  <el-table-column
                    prop="spanDriftZL"
                    label="24小时跨度漂移"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="总氮">
                  <el-table-column
                    prop="zeroAuditZD"
                    label="零点审核"
                  ></el-table-column>
                  <el-table-column
                    prop="zeroDriftZD"
                    label="24小时零点漂移"
                  ></el-table-column>
                  <el-table-column
                    prop="spanVerificationZD"
                    label="跨度核查"
                  ></el-table-column>
                  <el-table-column
                    prop="spanDriftZD"
                    label="24小时跨度漂移"
                  ></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">常规五参数标样核查</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column label="检测项目">
                  <el-table-column
                    prop="data"
                    label="监测日期"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="水温（℃）">
                  <el-table-column
                    prop="detectionSW"
                    label="检测温度"
                  ></el-table-column>
                  <el-table-column
                    prop="determinationSW"
                    label="测定温度"
                  ></el-table-column>
                  <el-table-column
                    prop="qualifiedSW"
                    label="是否合格"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="pH">
                  <el-table-column
                    prop="solutionpH"
                    label="标液温度"
                  ></el-table-column>
                  <el-table-column
                    prop="resultpH"
                    label="测定结果"
                  ></el-table-column>
                  <el-table-column
                    prop="qualifiedpH"
                    label="是否合格"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="溶解氧">
                  <el-table-column
                    prop="solutionRJY"
                    label="标液温度"
                  ></el-table-column>
                  <el-table-column
                    prop="resultRJY"
                    label="测定结果"
                  ></el-table-column>
                  <el-table-column
                    prop="qualifiedRJY"
                    label="是否合格"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="电导率">
                  <el-table-column
                    prop="solutionDDL"
                    label="标液温度"
                  ></el-table-column>
                  <el-table-column
                    prop="resultDDL"
                    label="测定结果"
                  ></el-table-column>
                  <el-table-column
                    prop="qualifiedDDL"
                    label="是否合格"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="浊度">
                  <el-table-column
                    prop="solutionZD"
                    label="标液温度"
                  ></el-table-column>
                  <el-table-column
                    prop="resultZD"
                    label="测定结果"
                  ></el-table-column>
                  <el-table-column
                    prop="qualifiedZD"
                    label="是否合格"
                  ></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">多点线性核查</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column
                  prop="testingItems"
                  label="检测项目">
                </el-table-column>
                <el-table-column
                  prop="sequencing"
                  label="测定顺序">
                </el-table-column>
                <el-table-column
                  prop="standardSolution"
                  label="标准溶液浓度（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="measuredValue"
                  label="测定值（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="accuracy"
                  label="准确度">
                </el-table-column>
                <el-table-column
                  prop="determination"
                  label="测定结果">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">集成干预检查</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column
                  prop="testingItems"
                  label="监测项目">
                </el-table-column>
                <el-table-column
                  prop="testResult"
                  label="系统测试结果（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="instrument"
                  label="仪器测试结果（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="relativeDeviation"
                  label="相对偏差（%）">
                </el-table-column>
                <el-table-column
                  prop="qualified"
                  label="是否合格">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">加标回收率</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column
                  prop="testingItems"
                  label="监测项目">
                </el-table-column>
                <el-table-column
                  prop="testResult"
                  label="样品体积（mg/L）">
                </el-table-column>
                <el-table-column label="加标样">
                  <el-table-column
                    prop="solution"
                    label="加标液浓度（mg/L）">
                  </el-table-column>
                  <el-table-column
                    prop="addedVolume"
                    label="加标体积（mL）">
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="beforeBidding"
                  width="154px"
                  label="加标前样品测定结果（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="afterBidding"
                  width="154px"
                  label="加标后样品测定结果（mg/L）">
                </el-table-column>
                <el-table-column
                  prop="recoveryRate"
                  label="加标回收率">
                </el-table-column>
                <el-table-column
                  prop="qualified"
                  label="是否合格">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="modular-item">
            <h5 class="modular-title">实际水样比对</h5>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                height="100%"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号">
                </el-table-column>
                <el-table-column
                  prop="testingItems"
                  label="监测项目">
                </el-table-column>
                <el-table-column
                  prop="company"
                  label="单位">
                </el-table-column>
                <el-table-column
                  prop="determination"
                  label="仪器测定结果">
                </el-table-column>
                <el-table-column
                  prop="laboratory"
                  label="实验室测定结果">
                </el-table-column>
                <el-table-column
                  prop="qualified"
                  label="是否合格">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-scrollbar>
      </div>
  </div>
</template>

<script>
export default {
  name: 'singleMonthAnalysis',
  data(){
    return {
      tableData:[],
    }
  },
  methods:{

  },
  mounted(){

  },
  created(){
    this.$store.commit("setShowlefttree", true);
  }
}
</script>

<style scoped lang="less">
.single-month-analysis{
  height: 100%;
  padding: 0 20px;
  .title-wrap{
    text-align: center;
    line-height: 24px;
    padding-top: 10px;
    .title{
      font-size: 16px;
    }
  }
  .single-modular-wrap{
    height: calc(100% - 58px);
  }
  .modular-title{
    color: #166bce;
    font-size: 14px;
    padding: 10px 0;
  }
  .modular-title:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    width: 8px;
    height: 8px;
    background: #166bce;
    margin-right: 4px;
  }
  .modular-body{
    padding: 0 10px;
  }

}
.normal-table-wrap{
  table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d6e3f2;
    td{
      border: 1px solid #d6e3f2;
      padding: 6px 8px;
      text-align: center;
    }
  }
}
</style>
